<!--
- Author:  LiShibin.
- Date:    2017/9/29 0029.
- File:    推荐的精品文章
-->
<template>
  <div class="Web_Box">
    <div class=" xd top_bg" style="position: fixed; width: 100%;">
      <div class="logo" @click="gotoHome"><i class="iconfont icon-logo"></i></div>
      <div class="search_index" style="width: 8rem">
        <form action="" @submit="search">
          <i class="iconfont icon-search" @click="search"></i><input type="search" autocomplete="off" v-model="keyword" placeholder="输入搜索关键字" style="font-size: 14px;color: #fff; padding-left: 15px;">
        </form>
      </div>
      <div class="location">
        <p style="line-height:35px;text-decoration:underline; color: #fff" @click="gotoAddArticle">我要发布<i class="iconfont icon-uayuanwen"></i></p>
      </div>
    </div>
    <div class="a_encytab" style="margin-top: 45px; position: fixed; width: 100%;">
      <div class="Tabs2">
        <ul>
          <li :class="{'on': articleType == $dictionary.articleType.special}" @click="switchArticleType($dictionary.articleType.special)">精品文章</li>
          <li :class="{'on': articleType == $dictionary.articleType.normal}" @click="switchArticleType($dictionary.articleType.normal)">谈花论草</li>
        </ul>
      </div>
    </div>
    <div class="bg_fff mb10" style="margin-top: 90px;">
      <div class="article_box f-cb"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <div class="articles_list f-cb" v-for="article in articleList.data" @click="gotoArticleDetail(article.id, article.is_sys)">
          <div class="art_tit slh">{{article.title}}</div>
          <div class="author">
            <!--<span class="au_img" @click.stop="gotoBlog(article.member_id, '1')"><img :src="article.member_avatar ? $config.imgsite + $config.avatarSrc + article.member_avatar + '_w150': defaultAvatar"></span>-->
            <span class="au_name" style="margin-right: 10px;" @click.stop="gotoBlog(article.member_id, '1')">{{article.member_name}}</span><span v-for="(tag, index) in article.d_ids" v-if="index < 3" class="article-tag">{{tag.d_name}}</span><span v-if="article.d_ids.length > 3" class="article-tag">...</span>

          </div>
          <div style="margin-top: 10px;">
            <i class="iconfont icon-dianzan"></i>
            <span>{{article.up_count}}</span>
            <span style="margin-left: 15px;">阅读：{{article.read_count}}</span>
            <span class="au_time fr">{{article.add_time | timestampToDate('yyyy-MM-dd')}}</span>
          </div>
        </div>
      </div>
    </div>
    <loading-more :allLoaded="articleList.allLoaded" :show="articleList.data.length > 0"></loading-more>
    <empty-data :show="articleList.allLoaded && articleList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        keyword: this.$route.query.keyword || '',
        articleType: this.$route.query.type || this.$dictionary.articleType.special, // 0 普通文章 1 精品文章
        defaultAvatar: require('../../../assets/images/avatar.png'),
        articleList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getArticleList(this.articleList.page, this.articleList.pageSize)
    },
    mounted() {
      this.$native.weixinShare(window.location.href, '谈花论草', null, '遇花园')
    },
    watch: {
      $route () {
        this.articleType = this.$route.query.type || this.$dictionary.articleType.special
        this.articleList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getArticleList(this.articleList.page, this.articleList.pageSize)
      }
    },
    methods: {
      gotoHome() {
        this.$router.push({name: 'home'})
      },
      gotoAddArticle() {
        // this.$router.push({name: 'article-add'})
        window.location.href = 'http://' + window.location.host + '/wap/blog/article/add/'
      },
      search(e) {
        e.preventDefault()
        this.initArticleList()
      },
      cancelSearch() {
        this.keyword = ''
        this.initArticleList()
      },
      initArticleList() {
        this.articleList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getArticleList(this.articleList.page, this.articleList.pageSize)
      },
      gotoBlog(memberId, showType) {
        this.$router.push({name: 'blog-index', query: {member: memberId, showType: showType}})
      },
      gotoArticleDetail(id, isSys) {
        if (isSys == '0') { // 手机端发布的文章
//          this.$router.push({name: 'article-detail', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail/' + id // ios微信分享要如此跳转后才能正确分享
        }
        if (isSys == '1') { // 后台发布的文章
//          this.$router.push({name: 'article-detail2', params: {id: id}})
          window.location.href = 'http://' + window.location.host + '/wap/blog/article/detail2/' + id // ios微信分享要如此跳转后才能正确分享
        }
      },
      switchArticleType(type) {
        this.articleType = type
        this.$router.replace({name: 'article-list', query: {type: type}})
      },
      getArticleList(page, pageSize) {
        this.articleList.loading = true
        this.$request.getArticleList(page, pageSize, this.articleType, this.keyword).then(data => {
          if (data.length < this.articleList.pageSize) {
            this.articleList.allLoaded = true
          }
          this.articleList.data = [...this.articleList.data, ...data]
        }).finally(() => {
          this.articleList.requested = true
          this.articleList.loading = false
        })
      },
      loadMore() {
        if (this.articleList.loading || this.articleList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getArticleList(++this.articleList.page, this.articleList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>
  .article-tag {
    margin-left: 5px;
    background-color: #3dbb6e;
    color: #fff;
    font-size: 12px;
    padding: 0 5px;
    border-radius: 3px;
    vertical-align: middle
  }
</style>